<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:mo="https://gitee.com/aun/Timo">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})">
</head>
<style>
    body{
        margin: 3% 3% ;
    }
</style>
<body class="layui-body" style="left: 0px">
<input id="shopsId" th:value="${shopsId}" hidden>
<div style="height: 30%">
    <div class="layui-row timo-card-screen">
        <div class="pull-left layui-form-pane timo-search-box">
            <div class="layui-inline">
                <label class="layui-form-label">人员手机号：</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" placeholder="请输入您要添加的手机号码" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <button class="layui-btn " id="userBtn">
                    <i class="fa fa-search"></i>
                </button>
            </div>
        </div>
    </div>
    <div>
        <table class="layui-table" id="userTable" lay-filter="userTable"></table>
    </div>

</div>
<div style="height: 60%">
    <hr class="layui-bg-cyan">
    <h1 style="text-align: center">店铺人员表</h1>
    <table class="layui-table" id="shopUserTable" lay-filter="shopUserTable"></table>
</div>
<script th:replace="/common/template :: script"></script>
<!-- 表格操作列1 -->
<script type="text/html" id="userTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="addShopUser">添加到店铺人员</a>
</script>
<!-- 表格操作列2-->
<script type="text/html" id="shopTableBar">
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="delShopUser">移除店铺人员</a>
</script>
<script th:inline="none">
    layui.use(['layer', 'form', 'table'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var shopsId = $("#shopsId").val();

        var shopUserTable = table.render({
            elem: '#shopUserTable',
            cellMinWidth: 100,
            page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
                layout: ['limit', 'prev', 'page', 'next', 'skip'] //自定义分页布局
                //,curr: 5 //设定初始在第 5 页
                //groups: 5 //只显示 1 个连续页码
                ,first: false //不显示首页
                ,last: false //不显示尾页
                ,limit: 5
                ,limits:[5,10,15,20]
            },
            url: '/shopsService/shops/shopUser?shopsId='+shopsId,
            cols: [
                [
                    {field: 'username', title: '账号名称', align: "center"},
                    {field: 'nickname', title: '真实名称', align: "center"},
                    {field: 'rolename', title: '角色名称', align: "center"},
                    {field: 'sex', title: '性别', align: "center", templet: function (d) {
                            if(d.sex==1){
                                return "男";
                            }else {
                                return "女";
                            }
                        }
                    },
                    {field: 'phone', title: '手机号码', align: "center"},
                    {align: 'center', toolbar: '#shopTableBar', title: '操作'}
                ]
            ]
        });

        var userTable = table.render({
            elem: '#userTable',
            cellMinWidth: 100,
            data: [],
            cols: [
                [
                    {field: 'username', title: '账号名称', align: "center"},
                    {field: 'nickname', title: '真实名称', align: "center"},
                    {field: 'sex', title: '性别', align: "center", templet: function (d) {
                            if(d.sex==1){
                                return "男";
                            }else {
                                return "女";
                            }
                        }
                    },
                    {field: 'phone', title: '手机号码', align: "center"},
                    {align: 'center', toolbar: '#userTableBar', title: '操作'}
                ]
            ]
        });
        // 工具条点击事件
        table.on('tool(userTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'addShopUser') { //
                $.ajax({
                    url: '/shopsService/shops/addShopUser',
                    method: 'post',
                    data: {
                        "userId": data.id,
                        "shopsId": shopsId
                    },
                    success: function (res) {
                        if(res.code == 200){
                            table.reload('shopUserTable');
                            layer.msg("添加成功")
                        }else {
                            if(res.msg){
                                layer.msg(res.msg)
                            }else {
                                layer.msg("添加失败")
                            }
                        }
                    }
                })
            }
        });


        // 工具条点击事件
        table.on('tool(shopUserTable)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'delShopUser') {
                $.ajax({
                    url: '/shopsService/shops/delShopUser',
                    method: 'post',
                    data: {
                        "shopUserId": data.shopUserId,
                        "userId": data.userId
                    },
                    success: function (res) {
                        if(res.code == 200){
                            table.reload('shopUserTable');
                            layer.msg("删除成功")
                        }else {
                            layer.msg("删除失败")
                        }
                    }
                })
            }
        });

        $("#userBtn").click(function () {
            var phone = $("input[name='phone']").val();
            if(phone){
                $.ajax({
                    url: '/shopsService/shops/searchUser?phone=' + phone,
                    method: 'get',
                    // data: {"access_token": tokens},
                    success: function (res) {
                        if(res.data[0]){
                            userTable.reload({
                                data : res.data,
                                limit : res.count
                            })
                        }else {
                            layer.msg("未查询到该手机号")
                        }
                    }
                })
            }else {
                layer.msg("请填写手机号")
            }
        })

    })
</script>
</body>
</html>